<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="实时车况：">
      <div id="map"></div>
    </el-form-item>

    <el-form-item label="车辆编号：">
      <el-input v-model="ruleForm.id" disabled class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="车辆名称：">
      <el-input v-model="ruleForm.name" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="车牌号：">
      <el-input v-model="ruleForm.car_number" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="车辆品牌：">
      <el-input v-model="ruleForm.brand" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="保养周期：">
      <el-input v-model="ruleForm.maintenance_time" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="最大载热量(GJ)：">
      <el-input v-model="ruleForm.load" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="实时载热量(GJ)：">
      <el-input v-model="ruleForm.storage" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="设备IMEI：">
      <el-input v-model="ruleForm.imei" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="车辆类型">
      <el-radio-group v-model="ruleForm.type">
        <el-radio label="1">大型</el-radio>
        <el-radio label="2">小型</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="车辆状态">
      <el-radio-group v-model="ruleForm.status">
        <el-radio label="1">出勤</el-radio>
        <el-radio label="2">待命</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    groupListApi,
    levelListApi,
    tagListApi,
    userInfoApi,
    userUpdateApi,
    userSaveApi,
    siteInfoApi
  } from '@/api/user'
  import {carInfoApi, carSaveApi, carUpdateApi} from "@/api/dashboard";

  const defaultObj = {
    birthday: '',
    cardId: '',
    id: null,
    mark: '',
    phone: '',
    realName: '',
    addres: '',
    groupId: '',
    level: '',
    isPromoter: false,
    status: false,
  }
  export default {
    name: "UserEdit",
    props: {
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        ruleForm: Object.assign({}, defaultObj),
        groupData: [],
        labelData: [],
        labelLists: [],
        levelList: [],
        groupList: [],
        rules: {},
        map: null
      }
    },
    mounted() {
      if (this.uid > 0) {
        this.userInfo()
      }
      this.groupLists()
      this.levelLists()
      this.getTagList()
    },
    methods: {
      // 详情
      mapSearch(address) {
        let that = this;
        AMap.plugin(["AMap.PlaceSearch"], function () {
          //构造地点查询类
          var placeSearch = new AMap.PlaceSearch({
            pageSize: 3, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "023", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: that.map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          //关键字查询
          placeSearch.search(address)
          // placeSearch.on('selectChanged',function (e) {
          //     document.querySelector('#mapAddress').value = e.selected.data.address
          // })
          //变更地址和经纬度
          placeSearch.on('listElementClick', function (e) {
            that.ruleForm.addres = e.data.address
            that.ruleForm.lat = e.data.location.lat
            that.ruleForm.lng = e.data.location.lng
          })
          placeSearch.on('markerClick', function (e) {
            that.ruleForm.addres = e.data.address
            that.ruleForm.lat = e.data.location.lat
            that.ruleForm.lng = e.data.location.lng
          })

        });
      },
      // 详情
      userInfo() {
        let that = this;
        carInfoApi({id: that.uid}).then(async res => {
          that.ruleForm = res
          that.map = new AMap.Map("map", {
            center: [that.ruleForm.lat, that.ruleForm.lng], // [107.755852, 29.590834],
            resizeEnable: true,
            expandZoomRange: true,
            zooms: [3, 20],
            zoom: 10.5, //8.35,
            showBuildingBlock: true,
            showLabel: true,
          })
          let carIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(18, 36),
            // 图标的取图地址
            image: 'https://webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/imgs/car.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(18, 36),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
          })
          let carMarker = new AMap.Marker({
            position: new AMap.LngLat(that.ruleForm.lat, that.ruleForm.lng),
            icon: carIcon,
            offset: new AMap.Pixel(-8, 0)
          })
          that.map.add(carMarker)
        })
      },
      // 分组列表
      groupLists() {
        groupListApi({page: 1, limit: 9999}).then(async res => {
          this.groupList = res.list
        })
      },
      //标签列表
      getTagList() {
        tagListApi({page: 1, limit: 9999}).then(res => {
          this.labelLists = res.list
        })
      },
      // 等级列表
      levelLists() {
        levelListApi({page: 1, limit: 9999, isShow: 1, isDel: 0}).then(async res => {
          this.levelList = res.list
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.uid > 0) {
              carUpdateApi({id: this.ruleForm.id}, this.ruleForm).then(async res => {
                this.$message.success('编辑成功')
                this.$parent.$parent.visible = false
                this.$parent.$parent.getList()
              })
            } else {
              carSaveApi(this.ruleForm).then(async res => {
                console.log(res)
                this.$message.success('编辑成功')
                this.$parent.$parent.visible = false
                this.$parent.$parent.getList()
              })
            }

          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetForm');
      }
    }
  }
</script>

<style scoped>
  .selWidth {
    width: 90%;
  }

  #map {
    width: 90%;
    height: 300px;
  }

  #panel {
    width: 30%;
    position: absolute;
    top: 35px;
    opacity: 0.9;
  }
</style>
